﻿@page "/component/feedback/message"

<Pager DataSource="@(new List<string>(new[]{
                         "Demo","Custom Message","Visible","Hidden","Compact","Floating","Attached","State","Color","Size"
                     }))">
    <Body>
        <Header1 Divider>
            Message
            <SubHeader>
                A message displays information that explains nearby content
            </SubHeader>
        </Header1>
        <PresentationPart Title="Demo">
            <Description>A basic message</Description>
            <RunTemplate>
                <Message>
                    <Header>Message header</Header>
                    Message content
                </Message>
            </RunTemplate>
            <CodeTemplate>
                @Code.GetCode(@"
```html
<Message>
    <Header>Message header</Header>
    Message content
</Message>
```
")
            </CodeTemplate>
        </PresentationPart>
        <PresentationPart Title="Custom Message">
            <Description>
                Create any content in inner content.
            </Description>
            <RunTemplate>
                <Message>
                    <Header>New Site Features</Header>
                    <List Bulleted>
                        <Item>You can now have cover images on blog pages</Item>
                        <Item>Drafts will now auto-save while writing</Item>
                    </List>
                </Message>

                <Message Icon Color="Color.Pink">
                    <Icon IconClass="right arrow"/>
                    <Content>
                        <Header>New Site Features</Header>
                        <List Ordered>
                            <Item>You can now have cover images on blog pages</Item>
                            <Item>Drafts will now auto-save while writing</Item>
                        </List>
                    </Content>
                </Message>
            </RunTemplate>
            <CodeTemplate>                
        @Code.GetCode(@"
```html
<Message>
    <Header>Changes in Service</Header>
    We just updated our privacy policy here to better service our customers. We recommend reviewing the changes.
</Message>

<Message Icon Color=""Color.Pink"">
    <Icon IconClass=""right arrow""/>
    <Content>
        <Header>New Site Features</Header>
        <List Ordered>
            <Item>You can now have cover images on blog pages</Item>
            <Item>Drafts will now auto-save while writing</Item>
        </List>
    </Content>
</Message>
```
")
            </CodeTemplate>
        </PresentationPart>
        <PresentationPart Title="Visible">
            <Description>
                A message can be set to visible to force itself to be shown.
            </Description>
            <RunTemplate>
                <Message Visible>You can always see me</Message>
            </RunTemplate>
            <CodeTemplate>
@Code.GetCode(@"
```html
<Message Visible>You can always see me</Message>
```
")
            </CodeTemplate>
        </PresentationPart>
                <PresentationPart Title="Hidden">
                    <Description>
                        A message can be hidden
                    </Description>
            <RunTemplate>
                <Message Hidden>Nothing you can see!!</Message>
            </RunTemplate>
            <CodeTemplate>
@Code.GetCode(@"
```html
<Message Hidden>Nothing you can see!!</Message>
```
")
            </CodeTemplate>
        </PresentationPart>
        <PresentationPart Title="Compact">
            <Description>
                A message can only take up the width of its content.
            </Description>
    <RunTemplate>
        <Message Compact>
            Get all the best inventions in your e-mail every day. Sign up now!
        </Message>
    </RunTemplate>
    <CodeTemplate>
        @Code.GetCode(@"
```html
<Message Compact>
    Get all the best inventions in your e-mail every day. Sign up now!
</Message>
```
")
    </CodeTemplate>
</PresentationPart>
        <PresentationPart Title="Floating">
            <Description>
                A message can float above content that it is related to
            </Description>
            <RunTemplate>
                <Message Floating>
                    Way to go!
                </Message>
            </RunTemplate>
            <CodeTemplate>
                @Code.GetCode(@"
```html
<Message Floating>
    Way to go!
</Message>
```
")
            </CodeTemplate>
        </PresentationPart>
        <PresentationPart Title="Attached">
            <Description>
                A message can be formatted to attach itself to other content
            </Description>
            <RunTemplate>
                <Message Attached>
                    <Header>Welcome to our site!</Header>
                    <p>Fill out the form below to sign-up for a new account</p>
                </Message>
                <Segment Attached>
                    You can have a form here
                </Segment>
            </RunTemplate>
            <CodeTemplate>
                @Code.GetCode(@"
```html
<Message Attached>
    <Header>Welcome to our site!</Header>
    <p>Fill out the form below to sign-up for a new account</p>
</Message>
<Segment Attached>
    You can have a form here
</Segment>
```
")
            </CodeTemplate>
        </PresentationPart>
        <PresentationPart Title="State">
            <Description>
                A message can be formatted to display as state 
            </Description>
            <RunTemplate>
                <Message State="State.Info">
                    Here is information message
                </Message>
                <Message State="State.Warning">
                    Attention please
                </Message>
                <Message State="State.Success">
                    Submit successfully
                </Message>
                <Message State="State.Error">
                    Error! You have a mistake
                </Message>
            </RunTemplate>
            <CodeTemplate>
@Code.GetCode(@"
```html
<Message State=""State.Info"">
     Here is information message
</Message>
<Message State=""State.Warning"">
    Attention please
</Message>
<Message State=""State.Success"">
    Submit successfully
</Message>
<Message State=""State.Error"">
    Error! You have a mistake
</Message>
```
")
            </CodeTemplate>
        </PresentationPart>
        <PresentationPart Title="Color">
            <Description>
                A message can be formatted to be different colors
            </Description>
    <RunTemplate>
        <Message Color="Color.Red">
            Red
        </Message>
        <Message Color="Color.Orange">
            Orange
        </Message>
        <Message Color="Color.Yellow">
            Yellow
        </Message>
        <Message Color="Color.Teal">
            Teal
        </Message>
        <Message Color="Color.Blue">
            Blue
        </Message>
        <Message Color="Color.Purple">
            Purple
        </Message>
        <Message Color="Color.Pink">
            Pink
        </Message>
        <Message Color="Color.Olive">
            Olive
        </Message>
        <Message Color="Color.Black">
            Black
        </Message>
        <Message Color="Color.Brown">
            Brown
        </Message>
        <Message Color="Color.Grey">
            Grey
        </Message>
        <Message Color="Color.Green">
            Green
        </Message>
    </RunTemplate>
    <CodeTemplate>
        @Code.GetCode(@"
```html
<Message Color=""Color.XXX"">...</Message>
```
")
    </CodeTemplate>
</PresentationPart>
        <PresentationPart Title="Size">
            <Description>
                A message can have different sizes
            </Description>
    <RunTemplate>
        <Message Size="Size.Mini">
            Mini
        </Message>
        <Message Size="Size.Tiny">
            Tiny
        </Message>
        <Message Size="Size.Small">
            Small
        </Message>
        <Message Size="Size.Medium">
            Medium
        </Message>
        <Message Size="Size.Large">
            Large
        </Message>
        <Message Size="Size.Big">
            Big
        </Message>
        <Message Size="Size.Huge">
            Huge
        </Message>
        <Message Size="Size.Massive">
            Massive
        </Message>
    </RunTemplate>
    <CodeTemplate>
        @Code.GetCode(@"
```html
<Message Size=""Size.XXX"">...</Message>
```
")
    </CodeTemplate>
</PresentationPart>
    </Body>
</Pager>